<template>
  <div class="filter-container">
    <el-form ref="searchForm" :inline="true" @submit.native.prevent>
      <template v-for="(formItem, index) in filters">
        <el-form-item
          v-if="formItem.type === 'select' && !formItem.noShow"
          :key="index"
        >
          <el-select
            v-model="formItem.value"
            :style="formItem.style || 'width: 220px'"
            :placeholder="formItem.placeholder"
            :disabled="formItem.disabled"
            :multiple="formItem.multiple || false"
            :allow-create="formItem.allowCreate || false"
            :filterable="formItem.hasOwnProperty('filterable') ? formItem.filterable : true"
            :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
            @change="handleChange(formItem.change, $event)"
          >
            <el-option
              v-for="(option,i) in formItem.options"
              :key="i"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="formItem.slot && !formItem.noShow"
          :key="index"
        >
          <slot :name="formItem.type" :formItem="formItem" />
        </el-form-item>

        <!-- <el-form-item
          v-if="formItem.type === 'cascader' && !formItem.noShow"
          :key="index"
        >
          <el-cascader
            v-model="formItem.value"
            :options="formItem.options"
            :placeholder="formItem.placeholder"
            :disabled="formItem.disabled"
            :style="formItem.style || 'width: 220px'"
            :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
            :props="formItem.typeProp || typeProp"
            @change="handleChange(formItem.change, $event)"
          />
        </el-form-item> -->

        <el-form-item
          v-if="formItem.type === 'input' && !formItem.noShow"
          :key="index"
        >
          <el-input
            v-model="formItem.value"
            :style="formItem.style || 'width: 220px'"
            :type="formItem.inputType || 'text'"
            :disabled="formItem.disabled"
            :placeholder="formItem.placeholder || '请输入'"
            :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
            @change="handleChange(formItem.change, $event)"
            @keyup.enter.native="submit"
          />
        </el-form-item>
        <el-form-item
          v-if="['date','year','month','datetime','daterange', 'monthrange','datetimerange'].includes(formItem.type) && !formItem.noShow"
          :key="index"
        >
          <el-date-picker
            v-model="formItem.value"
            :style="formItem.style || 'width: 220px'"
            :type="formItem.dateType"
            :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
            :disabled="formItem.disabled"
            :placeholder="formItem.placeholder || '请选择日期'"
            :start-placeholder="formItem.startpPlaceholder||'开始日期'"
            :end-placeholder="formItem.endPlaceholder||'结束日期'"
            :value-format="valueFormat(formItem.dateType)"
            :format="format(formItem.dateType)"
            @change="handleChange(formItem.change, $event)"
          />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button size="small" type="primary" @click="submit">
          查询
        </el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <slot name="btnList">
          <template v-for="(btn,index) in btnList">
            <el-button
              v-if="!btn.noShow"
              :key="index"
              :class="btn.class"
              :plain="btn.plain || false"
              :icon="btn.icon"
              :disabled="btn.disabled"
              :size="btn.size || 'small'"
              :type="btn.type || 'primary'"
              @click="btn.click"
            >
              {{ btn.text }}
            </el-button>
          </template>
        </slot>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'Filtering',
  props: {
    filters: {
      type: Array,
      default: () => []
    },
    btnList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // typeProp: {
      //   label: 'name',
      //   value: 'id',
      //   children: 'superviseConfigureDtoList',
      //   checkStrictly: true
      // },
    }
  },
  computed: {
    pickerOptions() {
      return (dateType) => {
        return {
          datetime: {
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            }]
          }
        }[dateType]
      }
    },
    valueFormat() {
      return (dateType) => {
        let value = ''
        if (['daterange',
          'date'].includes(dateType)) value = 'yyyyMMdd'
        if (dateType === 'year') value = 'yyyy'
        if (dateType === 'month') value = 'yyyyMM'
        if (['datetimerange',
          'datetime'].includes(dateType)) value = 'yyyyMMdd HHmmss' // datetimerange  datetime
        if (dateType === 'time') value = 'HHmmss'
        if (dateType === 'monthrange') value = 'yyyyMM'
        return value
      }
    },
    // 日期展示格式化
    format() {
      return (dateType) => {
        let value = ''
        if (['daterange',
          'date'].includes(dateType)) value = 'yyyy-MM-dd'
        if (dateType === 'year') value = 'yyyy'
        if (dateType === 'month') value = 'yyyy-MM'
        if (['datetimerange',
          'datetime'].includes(dateType)) value = 'yyyy-MM-dd HH:mm:ss'
        if (dateType === 'time') value = 'HH:mm:ss'
        if (dateType === 'monthrange') value = 'yyyy-MM'
        return value
      }
    }
  },
  methods: {
    emitChange(event, value) {
      event && typeof event === 'function' && event(value)
    },
    handleChange(event, value) {
      this.emitChange(event, value)
    },
    submit() {
      this.$emit('onFilter', this.filters.map(v => v.value))
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
